<template>

    <div id="id">
        <!-- <el-container>
            <el-header style="background:#fff8f4;">
            </el-header>
            <div class="main_box" style="width:100%;background:#fff;">
            <div class="main-box-t" style="width: 80%;margin: auto;">
            <div class="main-box-img" style="width: 20%;">
                <img :src="img" alt="" style="border-radius: 10px;width:72px;height:72px;">

            </div>
            <span style="font-size: 18px;text-align: center;">{{this.name}}</span>
            </div>
            </div>
          </el-container> -->
          <top></top>
          <Navigation></Navigation>

       

          <br>
          <div class="cardbox">
  


              <div class="cardbox_mid" style="width: 80%;margin: auto;border-radius:10px; padding: 10px;background-color: #fff;">

                <template>
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="个人信息修改" name="first">


                      <div class="cardbox_mid-title" style="padding: 20px;font-size: 25px;width:50%;margin: auto;text-align: center;">个人信息修改</div>

                <div class="cardbox_mid-box" style="width:50%;padding: 40px;margin-left: 20%;">

                    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                       
                        <el-form-item label="更换头像" >
                            <el-upload
                            multiple = "false"
                            action="http://localhost:8070/file/upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handsuccess"
                            :data="pppss"
                            limit = 1
                            >
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        
                          <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" src="" alt="">
                          </el-dialog>
        
                          </el-form-item>

           
                          <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>


                        <el-form-item label="性别" prop="sex" style="width:60%;">
                          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                          </el-select>
                        </el-form-item>


                        <el-form-item label="年龄" prop="age" style="width:60%;">
                            <el-input v-model="ruleForm.age"></el-input>
                          </el-form-item>



                        <el-form-item label="邮箱" prop="name" >
                            <el-input v-model="ruleForm.email" :disabled="true"></el-input>
                          </el-form-item>

                          <el-form-item label="密码" prop="password" >
                            <el-input v-model="ruleForm.password" type="password"></el-input>
                          </el-form-item>

                          <el-form-item label="注册时间" prop="date" >
                            <el-input v-model="ruleForm.date +' '+ ruleForm.time" :disabled="true"></el-input>
                          </el-form-item>

                        <el-form-item label="地址" prop="dsc">
                          <el-input type="textarea" v-model="ruleForm.dsc"></el-input>
                        </el-form-item>

                        <el-form-item>
                          <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                          <el-button @click="resetForm('ruleForm')">取消</el-button>
                        </el-form-item>
                      </el-form>
                    
                </div>



                    </el-tab-pane>
                    <!-- <el-tab-pane label="评论管理" name="second"> -->




                    </el-tab-pane>
                    <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
                  </el-tabs>
                </template>
        
                
        
        </div>

    </div>

</div>
</template>

<script>
    export default {
     methods: {
      
    },
      data() {
        return {
          ruleForm: {
        },

        dialogImageUrl:'',
        dialogVisible: false,
        activeName: 'first',
        img:'',

        form:[],
        name:''

    }
    
      },


      mounted:function(){
        this.loadexecution();
    },


      methods: {



        async  loadexecution()
        {

         const {data:res} = await this.$http.post('user/getUserEmail',this.$qs.stringify({email:JSON.parse(localStorage.getItem('email'))}));
          if(res.success==true){
            console.log(res.result)
            this.ruleForm = res.result;
            this.img = res.result.img;
            this.name = res.result.name

          }
        },

        async submitForm()
        {

            this.form.name =  this.ruleForm.name;
            this.form.img = this.ruleForm.img
            this.form.age = this.ruleForm.age;
            this.form.sex = this.ruleForm.sex;
            this.form.password = this.ruleForm.password;
            this.form.dsc = this.ruleForm.dsc;
            this.form.id = this.ruleForm.id;


            console.log(this.form)
            const {data:res} = await this.$http.post('user/UserUpdateUser',this.$qs.stringify(this.form))
            if(res.success==true){

            this.$message({
            type: 'success',
            message: "修改成功",
          });

          this.loadexecution();
          
   
        }else{
       
            this.$message({
            type: 'info',
            message: "修改失败!"
          });   

        }  
      
      
  


            console.log(this.form)



        },

        handleRemove(file, fileList) {

            console.log(file, fileList);

        
},

        handsuccess(file)
        {

        this.ruleForm.img = file.result;

        },


        handlePictureCardPreview(file) {
        console.log(file)
        this.ruleForm.img = file.url;
        this.dialogVisible = true;
        },


        uploadFile(file,fileList)
        {
        console.log(fileList)
        console.log(fifile.resultle)

}





      }
    }
  </script>

<style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  